<%--

--%>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!-- use EL-Expression-->
<%@ page isELIgnored="false" %>
<!-- use JSTL -->
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <!-- 引入CSS -->
    <link href="${pageContext.request.contextPath}/static/h-ui/css/H-ui.min.css" rel="stylesheet" type="text/css"/>
    <link href="${pageContext.request.contextPath}/static/h-ui/css/H-ui.login.css" rel="stylesheet" type="text/css"/>
    <link href="${pageContext.request.contextPath}/static/h-ui/lib/icheck/icheck.css" rel="stylesheet" type="text/css"/>
    <link href="${pageContext.request.contextPath}/static/h-ui/lib/Hui-iconfont/1.0.1/iconfont.css" rel="stylesheet"
          type="text/css"/>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css"
          href="${pageContext.request.contextPath}/static/easyui/themes/default/easyui.css">
    <!-- 引入JS -->
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/h-ui/js/H-ui.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/static/h-ui/lib/icheck/jquery.icheck.min.js"></script>


    <style>
        .h_title{position: relative;display: inline-block;}
        .box_div{
            width: 100%;
        }
        .box_main{
            position: absolute;
            top:18%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 100%;
            /*min-width: 1000px;*/
            /*box-shadow: 0 0 30px #322f2f;*/
        }
        .box_main_right{
            width: 50%;
            height:1000px;
            float: left;
            position: relative;
        }
        .box_form{
            position: absolute;
            top:50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
        .radio-box{
            float: left;
        }
    </style>
    <title>书店管理系统 | 登录页面 </title>
    <meta name="keywords" content="书店管理系统">
</head>

<body style="font-weight: lighter; ">

<div class="loginWraper">
    <div class="header" style="padding: 0;">
        <h3 style="font-weight: lighter; color: white; width: 550px; height: 60px; line-height: 60px; margin: 0 0 0 30px; padding: 0;">
            书店管理系统 — SSM
        </h3>
    </div>

    <div id="loginform" class="loginBox">
        <form id="form" class="form form-horizontal" method="post" action="#">
            <!-- 用户身份信息 -->


            <div class="box_div">
                <div class="box_main">


                        <div class="box_form">
                            <div style="width: 400px">
                                <!-- 用户类型 -->
                                <div class="mt-20 skin-minimal" style="text-align: center;">
                                    <div class="radio-box">
                                        <input type="radio" id="radio-1" name="userType" value="1"/>
                                        <label for="radio-1">用户登录</label>
                                    </div>
                                    <div class="radio-box">
                                        <input type="radio" id="radio-2" name="userType" value="2"/>
                                        <label for="radio-2">管理员登录</label>
                                    </div>
                                    <div class="radio-box">
                                        <input type="radio" id="radio-3" name="userType" checked value="3"/>
                                        <label for="radio-3">卖家登录</label>
                                    </div>
                                </div>

                                <c:if test="${not empty message}">
                                    <div style="width: 100%;height: 40px;clear: left;margin-bottom: 15px;background: rgba(252,158,158,0.3);border-radius: 5px">
                                        <P style="font-size: 17px;color: #8a1717;line-height: 40px;">${message}</P>
                                    </div>
                                </c:if>
                            </div>

                                <input type="text" name="userName" value="" placeholder="用户名" style="width: 100%;height: 40px;border-radius: 5px"><br><br>
                                <input type="password" name="password" value="" placeholder="密码" style="width: 100%;height: 40px;border-radius: 5px"><br><br>
                                <input id="submitBtn" type="button" value="登&nbsp;&nbsp;录" name="login" style="width: 100%;height: 35px;background: orange;color: white;font-size: 17px;border-radius: 5px">



                        </div>

                </div>
            </div>



        </form>


    </div>
<div>
    <input type="button" value="新用户注册" style=" display:inline-block;width: 100%;height: 35px;background: deepskyblue;color:white;font-size: 17px;border-radius: 5px;">

</div>


    <!-- 页面底部版权声明 -->
    <div class="footer">
        开发人员：柳少杰 王昕磊 孙浩洋
    </div>
</div>
<!-- 页面事件 -->
<script type="text/javascript">
    $(function () {

        //登录按钮事件
        $("#submitBtn").click(function () {
            //检查登录信息
            if ($('#userName').val() === '') {
                $.messager.alert("提示", "请输入用户名 !", "warning");
            } else if ($('#password').val() === '') {
                $.messager.alert("提示", "请输入密码 !", "warning");

            } else {
                //提交用户的登录表单信息
                var data = $("#form").serialize();
                $.ajax({
                    type: "post",
                    url: "login",
                    data: data,
                    dataType: "json",
                    success: function (data) {
                        if (data.success) {
                            window.location.href = "goSystemMainView";//进入系统主页面
                        } else {
                            $.messager.alert("提示", data.msg, "warning");

                        }
                    }
                });
            }
        });
        //设置复选框
        $(".skin-minimal input").iCheck({
            radioClass: 'iradio-blue',
            increaseArea: '25%'
        });
        $("#reg").click(function () {
            window.location.href = "/system/reg";
        });
    })

</script>

</body>
</html>